var data = [
  {
    id: "GRBL20180319102942691",
    name: "待审批",
    sex: "医疗医技",
    user: "新生小婴儿科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL20180319102942692",
    name: "待审批",
    sex: "医疗医技",
    user: "血液科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL20180319102942693",
    name: "待审批",
    sex: "护理异常",
    user: "康复科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL20180319102942694",
    name: "待审批",
    sex: "医疗医技",
    user: "新生小婴儿科",
    tel: "2018-04-17",
  },
  {
    id: "GRBL20180319102942695",
    name: "待审批",
    sex: "护理异常",
    user: "新生小婴儿科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL20180319102942696",
    name: "待审批",
    sex: "医疗医技",
    user: "肾脏免疫科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL20180319102942697",
    name: "待审批",
    sex: "护理异常",
    user: "血液科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL20180319102942698",
    name: "待审批",
    sex: "医疗医技",
    user: "新生小婴儿科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL20180319102942699",
    name: "待审批",
    sex: "输血不良",
    user: "康复科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL201803191029426910",
    name: "待审批",
    sex: "输血不良",
    user: "新生小婴儿科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL201803191029426912",
    name: "待审批",
    sex: "输血不良",
    user: "血液科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL201803191029426913",
    name: "待审批",
    sex: "ICU病房",
    user: "肾脏免疫科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL201803191029426914",
    name: "待审批",
    sex: "ICU病房",
    user: "血液科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL201803191029426915",
    name: "待审批",
    sex: "ICU病房",
    user: "康复科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL201803191029426916",
    name: "待审批",
    sex: "医疗器械",
    user: "血液科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL201803191029426917",
    name: "待审批",
    sex: "医疗器械",
    user: "新生小婴儿科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL201803191029426918",
    name: "待审批",
    sex: "药物不良",
    user: "肾脏免疫科",
    tel: "2018-04-16",
  },
  {
    id: "GRBL201803191029426919",
    name: "待审批",
    sex: "药物不良",
    user: "血液科",
    tel: "2018-04-16",
  },
];
// 时间
var oIn = document.querySelectorAll(".dd");
// 下拉
var chSe = document.querySelectorAll(".cation");
var oX = document.querySelectorAll(".xl");
var oLi1 = document.querySelectorAll("#xl1 li");
var oLi2 = document.querySelectorAll("#xl2 li");
var dataFn;
chSe[0].onclick = function () {
  oX[0].style.display = "block";
  oX[1].style.display = "none";
  event.cancelBubble = true;
};
chSe[1].onclick = function () {
  oX[1].style.display = "block";
  oX[0].style.display = "none";
  event.cancelBubble = true;
};

document.onclick = function () {
  oX[1].style.display = "none";
  oX[0].style.display = "none";
};
for (var i = 0; i < oLi1.length; i++) {
  oLi1[i].onclick = function () {
    oX[0].style.display = "none";
    chSe[0].innerHTML = this.innerHTML;
    event.cancelBubble = true;
  };
}
for (var i = 0; i < oLi2.length; i++) {
  oLi2[i].onclick = function () {
    oX[1].style.display = "none";
    chSe[1].innerHTML = this.innerHTML;
    event.cancelBubble = true;
  };
}
// 清除

var oQc = document.querySelector(".qc");
oQc.onclick = function () {
  // alert(2)
  chSe[0].innerHTML = "--请选择--";
  chSe[1].innerHTML = "--请选择--";
  oIn[0].value = "";
  oIn[1].value = "";
  render();
};
// 查询
var oCx = document.querySelector(".cx");
oCx.addEventListener("click", oCxFn);
function oCxFn() {
  render();
}

// 表格

//当前页码
var page = 1;
// 每页的条数
var count = 5;
// 获取tbody
var oTBody = document.querySelector("tbody");
//获取分页容器
var oPagination = document.querySelector(".pagination");
//获取上一页
var oPrevBtn = document.querySelector(".prev");
//获取下一页
var oNextBtn = document.querySelector(".next");
//初始化
var searchData = [];
function render() {
  
  var str1 = oIn[0].value==''?new Date('1992-8-25').getTime():new Date(oIn[0].value).getTime();
  var str2 = oIn[1].value==''?new Date('').getTime():new Date(oIn[1].value).getTime();
  var str3 = chSe[0].innerHTML;
  var str4 = chSe[1].innerHTML;
  
  var data1=[]
  var data2=[]
  
  // 查询判断
  
  
  if(str3.trim()=='--请选择--'){
    data1=data
  }else{
    data1=data.filter(function(v){
      return v.sex.includes(str3)
    })
  }
  if(str4.trim()=='--请选择--'){
    data2=data1
  }else{
    data2=data1.filter(function(v){
      return v.user.includes(str4)
    })
  }
  if(oIn[0].value=='' && oIn[1].value==''){
    searchData=data2
  }else{
    searchData=data2.filter(function(v){
      var time=new Date(v.tel).getTime();
      return time>=str1 && time<=str2

    })
  }
  
  // console.log(oIn[0].value=='' && oIn[1].value=='');
  
  oTBody.innerHTML = "";

  var renderArr = searchData.slice((page - 1) * count, page * count);
  for (var i = 0; i < renderArr.length; i++) {
    var oTr = document.createElement("tr");
    oTr.innerHTML = `<td>${renderArr[i].id}</td>
    <td>${renderArr[i].name}</td>
    <td>${renderArr[i].sex}</td>
    <td>${renderArr[i].user}</td>
    <td>${renderArr[i].tel}</td>
    <td><button class="submit">审批</button></td>
    `;
    oTBody.appendChild(oTr);
  }
  //渲染页码
  //找到所有的1，2，3，4的页码
  var aPageBtn = document.querySelectorAll(".pageBtn");
  //删除所有的页码
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
  }
  //根据数据的长度重新创建页码
  // console.log(Math.ceil(dataFn.length / count));
  for (var i = 1; i <= Math.ceil(searchData.length / count); i++) {
    //创建li
    var oLi = document.createElement("li");
    //给li创建内容
    oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
    //如果li和当前的页码一致，给他加一个选中的class
    if (i == page) {
      oLi.classList.add("active");
    }
    //在下一页的前面插入页码
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  }
}
render();
//给分页加事件
oPagination.addEventListener("click", changePage);
function changePage() {
  //如果当前点击的按钮有pageBtn这个class名字
  if (event.target.className == "pageBtn") {
    //修改全局的page
    page = event.target.innerText;
    //渲染table，渲染分页
    render();
  }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener("click", prev);
oNextBtn.addEventListener("click", next);
function prev() {
  if (page > 1) {
    page--;
    render();
  }
}
function next() {
  console.log(page < Math.ceil(searchData.length / count));
  if (page < Math.ceil(searchData.length / count)) {
    page++;
    render();
  }
}
